<template>
	<view class="item p-b-20" @click="momentsClick(item.dynID)">
		<!--用户头像-->
		<view class="item-portrait">
			<image :src="data.icon"></image>
		</view>
		<view class="item-desc">
			<!--用户昵称-->
			<view class="desc-header m-b-10">
				<view class="user">
					<text class="user-name" v-text="data.periNickname || '小区住户' "></text>
				</view>
				<!--发布时间-->
				<view class="desc-time">{{timeago}}</view>
			</view>
			<!--发布文本内容-->
			<view class="desc-text m-b-10" v-text="data.dynDetails"></view>
			<!--发布的图片-->
			<view class="desc-image">
				<image v-for="item in data.filesList" :class="isImageList" :src="item.filesPath" :key="item.filesID" mode="aspectFill"></image>
			</view>
			<!--点赞和评论数-->
			<view class="operation-warpper">
				<view class="comment">
					<image src="../../../static/images/neighbor/images/pinglun.png"></image>{{data.commentNumber}}
				</view>
				<view class="like">
					<image :src="data.isLike==0?'../../../static/images/neighbor/images/zan_n.png': '../../../static/images/neighbor/images/zan_y.png' "></image> {{data.likeNumber}}
				</view>
			</view>
			<!--评论内容-->
			<view class="comment-content m-b-10 p-t-10" v-if="data.commentNumber!=0">
				<view class="comment-item" v-for="son in data.dynCommentsList" :key="son.periNickname">
					<text class="item-name">{{son.periNickname || '某吃瓜群众'  }}：</text>
					<text class="item-text">{{son.comDetails}}</text>
				</view>
				<view class="more">查看全部{{data.commentNumber}}条评论
					<text class="mui-icon mui-icon-arrowright"></text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import util from '../../common/js/util.js'
	export default {
		name: 'share-item',
		props: {
			data: Object
		},
		data() {
			return {
				isImgState: 'image-1'
			}
		},
		computed: {
			isImageList() {
				let that = this;
				let num = this.data.filesList.length;
				let state;
				if (num == 1) {
					state = 'image-1'
				} else if (num == 2) {
					state = 'image-2'
				} else {
					state = 'image-3'
				}
				return that.isImgState = state
			},
			timeago() {
				return  util.timeago(this.data.dynCD) 
			}
		}
	} 
</script>

<style lang="scss" scoped>
	@import '../../common/scss/_common.scss';

	.item {
		padding: ws(15);
		margin-bottom: ws(15);
		display: flex;
		align-items: flex-start;
		border-radius: ws(10);
		box-shadow: $shaow-main;
		background-color: #fff;

		.item-portrait {
			width: ws(68/2);
			height: ws(68/2);
			border-radius: 50%;
			overflow: hidden;

			>image {
				width: 100%;
				height: 100%;
			}
		}

		.item-desc {
			flex: 1;
			margin-left: ws(15);

			.desc-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				color: #7f7f7f;

				.user {
					display: flex;

					.user-name {
						font-size: ws(15);
						color: #414141;
						font-weight: bold;
						margin-right: ws(3);
					}

					.user-tenement {
						font-size: ws(12);
					}
				}

				.desc-time {
					font-size: ws(12);
				}
			}

			.desc-text {
				font-size: ws(14);
				color: #191919;
				line-height: ws(16);
			}

			.desc-image {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-bottom: ws(5);

				>image {
					object-fit: cover;
					margin-bottom: ws(5);
				}

				.image-1 {
					width: 100%;
					height: ws(180);
				}

				.image-2 {
					width: ws(130);
					height: ws(160/2);
				}

				.image-3 {
					width: ws(85);
					height: ws(60);
				}
			}


			.operation-warpper {
				display: flex;
				justify-content: flex-end;
				font-size: ws(15);
				color: #7f7f7f;

				>view {
					display: flex;
					align-items: center;

					image {
						width: ws(17);
						height: ws(17);
						margin-right: ws(3);
						margin-bottom: ws(1);
					}
				}

				.like {
					margin-left: ws(30);

					image {
						width: ws(19);
						height: ws(19);
						margin-bottom: ws(3);
					}
				}
			}

			.comment-content {
				background-color: #F7F7F7;
				padding: ws(10);
				margin-top: ws(5);

				.comment-item {
					font-size: ws(13);
					line-height: ws(16);

					.item-name {
						color: #414141;
					}

					.item-text {
						color: #7f7f7f;
					}
				}

				.more {
					margin-top: ws(5);
					font-size: ws(13);
					color: #b1b1b1;
					display: flex;
					align-items: center;

					.mui-icon {
						margin-top: ws(1);
						font-size: ws(18);
						color: #b1b1b1;
					}
				}
			}
		}
	}
</style>
